<template>
  <div class="photoinfo-container">
    <h3 class="title">{{ currentNews.title }}</h3>
    <p class="sub-title">
      <span>发表时间：{{ currentNews.addtime | dateFormat }}</span>
      <span>浏览次数：{{ currentNews.click }}</span>
    </p>
    <hr>
    <!-- 缩略图区域 -->
    <div class="thumbs">
      <vue-preview :slides="imagelist" @close="handleClose"></vue-preview>
    </div>
    <div class="content" v-html="currentNews.desc">
    </div>
    <hr>
    <comment-box :id="id"></comment-box>
  </div>
</template>

<script>
import { Toast } from 'mint-ui'
import CommentBox from '../subcomponents/comment.vue'
export default {
  data() {
    return {
      currentNews: { },
      id: this.$route.params.id,
      imagelist: []
    }
  },
  created() {
    this.getImageNews()
  },
  methods: {
    getImageNews() {
      this.$http.get('images/'+this.id).then(result => {
        this.currentNews = result.body
        this.currentNews.imgs.forEach(element => {
            this.imagelist.push({
              src: element,
              msrc: element,
              alt: this.currentNews.title,
              title: this.currentNews.title,
              w: 414,
              h: 500
            })
        })
      }, error => {
        Toast('新闻获取失败！')
      })
    },
    handleClose() {
      console.log('close')
    }
  },
  components: {
    'comment-box' : CommentBox
  }
}
</script>

<style lang="scss" scoped>
.photoinfo-container{
    padding: 0 4px;
    .title{
      padding: 15px 0;
      font-size: 17px;
      text-align: center
    }

    .sub-title{
      display: flex;
      justify-content: space-between;
      font-size: 12px;
    }

    .content{
      font-size: 13px;
      line-height: 30px;
    }
  }
</style>
